<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>JavaScript Datepicker Test</title>

<!-- Common Style -->	
	<link href="datepicker.css" rel="stylesheet" type="text/css" />
<!-- Common Validation -->				
	<script src='datepicker.js' language='javascript' ></script>		
	
<script language="JavaScript">

</script>

<style>

</style>

</head><body>

<h2>JavaScript Date Picker Test</h2>

This is a demonstration of some basic JavaScript DHTML datepicker 
functionality, allowing you to present a drop-down calendar to your 
users at the click of a button so they can easily choose a date that 
will be inserted into a text field.
<p>
There are many other datepickers available on the Internet...this 
happens to be the one that I wrote. You are free to use it in any way 
you'd like in your own applications. If you're feeling nice, you could 
even include my name with the code.
</p><p>
Please see the JavaScript code on the page source itself for additional information.
</p><p></p><hr><p>

</p><form>
Here's an example of displaying the datepicker below a text field:
<br>
<b>A Date:</b> <input value="06/29/2012" name="ADate"> 
<input value="select" onClick="displayDatePicker('ADate');" type="button">
</form>
<p>

</p><form>
And here's an example of displaying it below the button that was clicked:
<br>
<b>Another Date:</b> <input value="10/05/2011" name="AnotherDate"> 
<input value="select" onClick="displayDatePicker('AnotherDate', this);" type="button">
</form>
<p>

</p><form>
And here's an example of displaying the resulting value with a date format of dd.mm.yyyy:
<br>
<b>Yet Another Date:</b> <input value="05.10.2011" name="YetAnotherDate"> 
<input value="select" onClick="displayDatePicker('YetAnotherDate', false, 'dmy', '.');" type="button">
</form>
<p>

The format of the datepicker (color, fonts, etc.) is easily customized 
using CSS. The date format can be customized using either global 
variables or each time you call the function that displays the date 
picker (see the code for more information). Enjoy.
</p><p></p><hr><p>

</p><center><i>
Julian Robichaux<br>
<a href="http://www.nsftools.com/">http://www.nsftools.com</a>
</i></center>
<p>

</p><div style="visibility: hidden; position: absolute; left: 66px; top: 219px; display: none; z-index: 10000;" class="dpDiv" id="datepicker"><table class="dpTable" cols="7">
<tbody><tr class="dpTitleTR"><td class="dpButtonTD"><button class="dpButton" onclick='refreshDatePicker("ADate", 2012, 4);'>&lt;</button></td>
<td colspan="5" class="dpTitleTD"><div class="dpTitleText">June 2012</div></td>
<td class="dpButtonTD"><button class="dpButton" onclick='refreshDatePicker("ADate", 2012, 6);'>&gt;</button></td>
</tr>
<tr class="dpDayTR"><td class="dpDayTD">Su</td>
<td class="dpDayTD">Mo</td>
<td class="dpDayTD">Tu</td>
<td class="dpDayTD">We</td>
<td class="dpDayTD">Th</td>
<td class="dpDayTD">Fr</td>
<td class="dpDayTD">Sa</td>
</tr>
<tr class="dpTR"><td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' &nbsp;=""></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' &nbsp;=""></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' &nbsp;=""></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' &nbsp;=""></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' &nbsp;=""></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/01/2012');">1</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/02/2012');">2</td>
</tr>
<tr class="dpTR"><td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/03/2012');">3</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/04/2012');">4</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/05/2012');">5</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/06/2012');">6</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/07/2012');">7</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/08/2012');">8</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/09/2012');">9</td>
</tr>
<tr class="dpTR"><td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/10/2012');">10</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/11/2012');">11</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/12/2012');">12</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/13/2012');">13</td>
<td class="dpDayHighlightTD" onmouseout='this.className="dpDayHighlightTD";' onmouseover='this.className="dpTDHover";' onClick="updateDateField('ADate', '06/14/2012');"><div class="dpDayHighlight">14</div></td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/15/2012');">15</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/16/2012');">16</td>
</tr>
<tr class="dpTR"><td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/17/2012');">17</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/18/2012');">18</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/19/2012');">19</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/20/2012');">20</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/21/2012');">21</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/22/2012');">22</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/23/2012');">23</td>
</tr>
<tr class="dpTR"><td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/24/2012');">24</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/25/2012');">25</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/26/2012');">26</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/27/2012');">27</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/28/2012');">28</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/29/2012');">29</td>
<td class="dpTD" onmouseout='this.className="dpTD";' onmouseover=' this.className="dpTDHover";' onClick="updateDateField('ADate', '06/30/2012');">30</td>
</tr>
<tr class="dpTR"></tr>
<tr class="dpTodayButtonTR"><td colspan="7" class="dpTodayButtonTD"><button class="dpTodayButton" onclick='refreshDatePicker("ADate");'>this month</button> <button class="dpTodayButton" onclick='updateDateField("ADate");'>close</button></td>
</tr>
</tbody></table>
</div><iframe style="position: absolute; width: 0pt; height: 0pt; top: 219px; left: 66px; z-index: 9999; visibility: hidden; display: none;" src="javascript:false;" id="datepickeriframe" frameborder="0" scrolling="no"></iframe></body></html>